<template>
	<view v-if="item">
		<view class="">
			{{item.type}} ({{item.children.length}})
			<text @click="pop.open()">操作</text>
		</view>
		
		<view class="list-item" v-for="(item, index) in item.children" :key="index">
			<my-list-item :item="item"></my-list-item>
		</view>
		
		<uni-popup ref="pop" type="bottom" >
			<view class="" style="background-color: white;">
				<input type="text" placeholder="请输入新名字" v-model="newType"/>
				<button @click="handleClick1">修改名称</button>
				<button @click="handleClick">删除</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	const item = ref(null)
	const pop = ref()
	const newType = ref('')
	const handleClick1 = () => {
		// 1. 获取列表
		const collectionList = uni.getStorageSync('collectionList')
		// 2， 获取需要列表项目
		const current = collectionList.find(v => v.type === item.value.type)
		// 3. 修改
		current.type = newType.value
		// 4. 保存回去
		uni.setStorageSync("collectionList", collectionList);
		uni.switchTab({
			url: '/pages/collection/collection'
		})
	}
	const handleClick = () => {
		const collectionList = uni.getStorageSync('collectionList')
		const newCollectionList = collectionList.filter(v => v.type !== item.value.type)
		uni.setStorageSync("collectionList", newCollectionList);
		uni.switchTab({
			url: '/pages/collection/collection'
		})
	}
	onLoad(options => {
		item.value = JSON.parse(options.item)
		
		console.log(item.value)
	})
</script>

<style lang="scss">

</style>